import "../css/common.css";
import "../css/explore.css";
import "../js/axios.js";
import axios from 'axios';

// 每次拿10个
let pageSize = 10
// 加载的页数,每次触底更新该数据
let pageNum = 0
// 记录点击的是哪一个按钮(初始是全部)
let pageType = 0
// total总共会有多少页
let total = 0
let flag = true
let tabClick = 0

// 事件委托li
let tabUl = document.querySelector(".sec-nav>ul")
let main = document.querySelector("main")
let str = "全部"
// 一开始拿到全部的数据并渲染
exploreAllData("全部")

// 瀑布流函数
function waterfallFn() {
  // 设定每个元素的间隙
  let space = 20;
  let boxList = document.querySelectorAll('.box');
  let main = document.querySelector("main")
  let maxH
  // 每个元素的宽度
  const boxWidth = boxList[0].offsetWidth + space;
  // 获取当前页面的列数 (一行能够容纳多少个元素)
  const colCount = Math.floor(main.offsetWidth/ boxWidth);
  // 创建一个数组, 数组成员列数成员的高度
  let heightArr = new Array(colCount).fill(0); // [0,0,0]
  // 遍历所有的元素, 比较他们的高度, 设置最小高度
  boxList.forEach((el) => {
    const h = el.offsetHeight;
    // const minH = Math.min(...heightArr)
    let tempArr = JSON.parse(JSON.stringify(heightArr))
    const minH = tempArr.sort(function (a, b) { return a - b })[0]
    // 获取最小值的下标
    const minIndex = heightArr.indexOf(minH);
    // 一次性写入样式
    el.style.cssText = `
      position: absolute;
      top: ${minH}px;
      left: ${boxWidth * minIndex}px;
      `;
    // 修改最小高度的值 (累加)
    heightArr[minIndex] += h + space;
    tempArr = JSON.parse(JSON.stringify(heightArr))
    maxH = tempArr.sort(function (a, b) { return a - b })[tempArr.length - 1]
  });
  main.style.height = `${maxH}px`
}

// 获取探索的数据,传入一个字符串，根据字符串去找对应分类的数据
async function exploreAllData(str) {
  try {
    let res = await new Promise((resolve, reject) => {
      resolve(axios({
        url: "http://119.91.237.19:7001/api/web/carouselGroup/getAllCarouselGroup",
        method: "get",
        params: {
          projectId: 26,
          limit:100
        }
      }))
    }) 
    // 将探索的内容拿出来
    let newArr = res.data.data.rows.filter((item) => { return item.name.slice(0, 2) === "探索" })
    // console.log(newArr);
    // 渲染标签栏
    if (!tabClick) {
      let secNavUl = document.querySelector(".sec-nav>ul")
      let navStr = ' <li class="active" data-pageNum="0" data-name="全部">全部</li>'
      newArr.forEach(function (item,index) {
        // console.log(item.name.slice(3, item.name.length));
        navStr += `<li data-pagenum="${index+1}" data-name="${item.name.slice(3, item.name.length)}">${item.name.slice(3, item.name.length)}</li>`
      })
      secNavUl.innerHTML = navStr
    }

    // 如果点击的是分类的内容，需要将对应的内容筛选出来
    if (str != "全部") {
      newArr = newArr.filter((item) => {
        return item.name.slice(3,item.name.length)===str
      })
    }
   
    // 将数据根据id的从大到小排序
    newArr = dataSort(newArr)
    total = Math.ceil(newArr.length / pageSize)
    newArr = sliceArr(newArr)
    render(newArr)
  } catch (error) {
    console.log(error);
  }
}

function sliceArr(arr) {
  return arr.slice(pageNum*pageSize,pageSize*(pageNum+1))
}

// 根据id的大小去排列数据，新加入的图片id大，放在前面
function dataSort(arr) {
  let newArr = []
  arr.forEach(item => {
    item.w_carousels.forEach(item => {
      newArr.push(item)
    });
  })
  // 根据id的大小排序，新加入的图片id大，则将其放在数组的前面
  return newArr.sort((a, b) => {
    return b.id-a.id
  })
}

function render(arr) {
  let main = document.querySelector("main");
  let indexImg = 0;
  for (let i = 0; i < arr.length; i++) {
    let childBox = document.createElement("div");
    childBox.classList.add("box");
    let childImg = document.createElement("img");
    childImg.src = arr[i].url;
    childImg.alt = "图片加载失败"
    childImg.onload = function() {
      indexImg++;
      if (indexImg === arr.length) {
        waterfallFn(); 
        pageNum++
        flag = true
      }
    };
    childBox.appendChild(childImg);
    main.appendChild(childBox);
  }
}

// 事件委托点击
tabUl.addEventListener("click", (e) => {
  let lis = tabUl.querySelectorAll("li")
  if (e.target.tagName === "LI") {
    tabClick++
    pageNum = 0
    let main = document.querySelector("main")
    main.innerHTML = ''
    lis[pageType].classList.remove("active")
    lis[Number(e.target.dataset.pagenum)].classList.add("active")
    pageType = Number(e.target.dataset.pagenum)
    str = e.target.dataset.name
    exploreAllData(e.target.dataset.name)
    window.scrollTo({
      top: 0
    })
  }
})

// 触底加载
window.addEventListener("scroll", () => {
  if (pageNum >= total) return
  let docScrollTop = document.documentElement.scrollTop
  let docHeight = document.documentElement.clientHeight
  // 判断是否到底部
  if (docScrollTop + docHeight >= main.offsetTop + main.offsetHeight) {
    if (flag === false) return
    flag = false
    setTimeout(() => {
      exploreAllData(str)
    },500)
    // console.log("到底了");
  }
})
